<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>
  </title>
</head>
<body>
  
<h1>桌面分享 capture</h1>

<video src=""></video>

<script>
// In the renderer process.
  const {desktopCapturer} = require('electron');
  
  desktopCapturer.getSources({types: ['window', 'screen']}, (error, sources) => {
    if (error) throw error
    for (let i = 0; i < sources.length; ++i) {
      console.log(sources[i].name)

      //整个桌面 Entire screen 
      if (sources[i].name.indexOf('Entire screen') > -1) {
        navigator.mediaDevices.getUserMedia({
          audio: false,
          video: {
            mandatory: {
              chromeMediaSource: 'desktop',
              chromeMediaSourceId: sources[i].id,
              minWidth: 1280,
              maxWidth: 1280,
              minHeight: 720,
              maxHeight: 720
            }
          }
        })
        .then((stream) => handleStream(stream))
        .catch((e) => handleError(e))
        return
      }
    }
  })
  
  function handleStream (stream) {
    const video = document.querySelector('video');
    console.log("get stream");
    video.srcObject = stream;
    video.onloadedmetadata = (e) => video.play()
    console.log("play");
  }
  
  function handleError (e) {
    console.log(e)
  } 
</script>

</body>
</html>